<template>
  <div class="container">
    <div class="choice-container">
      <el-card shadow="never">
        <span class="explainWord">说明: 目前支持学科和关键字条件筛选</span>
        <!-- "新增试题"按钮 -->
        <el-row type="flex" justify="end">
          <el-button type="success" icon="el-icon-edit" @click="add">新增试题</el-button>
        </el-row>
        <!-- "新增试题"按钮 -->
        <div class="elcard_body">
          <!-- 表单 -->
          <el-row :gutter="15">
            <el-form
              ref="formRef"
              :model="formData"
              size="medium"
              label-width="100px"
              label-position="left"
            >
              <!-- 学科 -->
              <el-col :span="24">
                <el-row type="flex" justify="space-between" align="middle" :gutter="16">
                  <el-col :span="24">
                    <el-form-item label="学科" prop="subjectID" class="part">
                      <el-select
                        v-model="formData.subjectID"
                        placeholder="请选择"
                        clearable
                        :style="{width: '100%'}"
                        filterable
                      >
                        <el-option
                          v-for="(item, index) in subjectsList"
                          :key="index"
                          :label="item.label"
                          :value="item.subjectName"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 学科 -->
                  <!-- 二级目录 -->
                  <el-col :span="24">
                    <el-form-item label="二级目录" prop="catalogID">
                      <el-select
                        v-model="formData.catalogID"
                        placeholder="请选择"
                        clearable
                        :style="{width: '100%'}"
                      >
                        <el-option
                          v-for="(item, index) in data.items"
                          :key="index"
                          :label="item.label"
                          :value="item.catalogID"
                          :disabled="item.disabled"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 二级目录 -->
                  <!-- 标签 -->
                  <el-col :span="24">
                    <el-form-item label="标签" prop="tags">
                      <el-select
                        v-model="formData.tags"
                        placeholder="请选择"
                        clearable
                        :style="{width: '100%'}"
                      >
                        <el-option
                          v-for="(item, index) in data.items"
                          :key="index"
                          :label="item.label"
                          :value="item.tags"
                          :disabled="item.disabled"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 标签 -->
                  <!-- 关键字 -->
                  <el-col :span="24">
                    <el-form-item label="关键字" prop="keyword">
                      <el-input
                        v-model="formData.remarks"
                        clearable
                        :style="{width: '100%'}"
                        filterable
                      />
                    </el-form-item>
                  </el-col>
                  <!-- 关键字 -->
                </el-row>
              </el-col>
              <!-- 试题类型 -->
              <el-col :span="24">
                <el-row type="flex" justify="space-between" align="middle" :gutter="16">
                  <el-col :span="24">
                    <el-form-item label="试题类型" prop="questionType">
                      <el-select
                        v-model="formData.questionType"
                        placeholder="请选择"
                        clearable
                        :style="{width: '100%'}"
                      >
                        <el-option
                          v-for="(item, index) in questionType"
                          :key="index"
                          :label="item.label"
                          :value="item.label"
                          :disabled="item.disabled"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 试题类型 -->
                  <!-- 难度 -->
                  <el-col :span="24">
                    <el-form-item label="难度" prop="difficulty">
                      <el-select
                        v-model="formData.difficulty"
                        placeholder="请选择"
                        clearable
                        :style="{width: '100%'}"
                      >
                        <el-option
                          v-for="(item, index) in difficulty"
                          :key="index"
                          :label="item.label"
                          :value="item.label"
                          :disabled="item.disabled"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 难度 -->
                  <!-- 方向 -->
                  <el-col :span="24">
                    <el-form-item label="方向" prop="direction">
                      <el-select
                        v-model="formData.direction"
                        placeholder="请选择"
                        clearable
                        :style="{width: '100%'}"
                      >
                        <el-option
                          v-for="(item, index) in direction"
                          :key="index"
                          :label="item.label"
                          :value="item"
                          :disabled="item.disabled"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 方向 -->
                  <!-- 录入人 -->
                  <el-col :span="24">
                    <el-form-item label="录入人" prop="creatorID">
                      <el-select
                        v-model="formData.creatorID"
                        placeholder="请选择"
                        clearable
                        :style="{width: '100%'}"
                      >
                        <el-option
                          v-for="(item, index) in data.items"
                          :key="index"
                          :label="item.label"
                          :value="item.creator"
                          :disabled="item.disabled"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 录入人 -->
                </el-row>
              </el-col>
              <el-col :span="24">
                <el-row type="flex" justify="start" align="top" :gutter="15">
                  <el-col :span="24">
                    <el-form-item label="题目备注" prop="remarks">
                      <el-input v-model="formData.remarks" clearable :style="{width: '100%'}" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="企业简称" prop="shortName">
                      <el-input v-model="formData.shortName" clearable :style="{width: '100%'}" />
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <!-- 选择城市 -->
                    <el-row type="flex" align="middle" :gutter="24">
                      <el-col>
                        <el-form-item label="城市" prop="province">
                          <el-select
                            v-model="formData.province"
                            placeholder="请选择城市"
                            :style="{width: '150px'}"
                            clearable
                            @change="handleProvince"
                          >
                            <el-option
                              v-for="item in citySelect.province"
                              :key="item"
                              :label="item"
                              :value="item"
                            />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col>
                        <el-form-item label-width="0">
                          <el-select
                            v-model="formData.city"
                            placeholder="请选择"
                            clearable
                            :style="{width: '150px'}"
                          >
                            <el-option
                              v-for="item in citySelect.cityDate"
                              :key="item"
                              :label="item"
                              :value="item"
                            />
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <!-- 选择城市 -->
                  </el-col>
                  <el-col :span="24">
                    <!-- 按钮 -->
                    <el-form-item size="large" type="flex">
                      <el-row type="flex" justify="end">
                        <el-button @click="clear">清除</el-button>
                        <el-button type="primary" @click="search">搜索</el-button>
                      </el-row>
                    </el-form-item>
                    <!-- 按钮 -->
                  </el-col>
                </el-row>
              </el-col>
            </el-form>
          </el-row>
          <!-- 表单 -->
          <!-- tabs标签切换 -->
          <el-tabs type="card" @tab-click="handleClick">
            <el-tab-pane label="全部">
              <!-- 子组件 -->
              <cata :list="dataList" />
              <!-- 子组件 -->
            </el-tab-pane>
            <el-tab-pane label="待审核">
              <cata :list.sync="waitList" />
            </el-tab-pane>
            <el-tab-pane label="已审核">
              <cata :list="alreadyList" />
            </el-tab-pane>
            <el-tab-pane label="已拒绝">
              <cata :list="rejectList" />
            </el-tab-pane>
          </el-tabs>
          <!-- tabs标签切换 -->
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { choice } from '@/api/hmmm/questions'
import { list } from '@/api/hmmm/subjects'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
// 目录对话框
import cata from '@/module-hmmm/components/questions-check'
export default {
  name: 'QuestionChoice',
  components: {
    cata
  },
  props: [],
  data() {
    return {
      formData: {
        subjectID: undefined, // 学科列表
        catalogID: undefined,
        tags: undefined,
        keyword: undefined,
        questionType: undefined,
        difficulty: undefined,
        direction: undefined,
        creatorID: undefined,
        remarks: undefined,
        shortName: undefined,
        province: undefined,
        city: undefined
      },
      data: [], // 全部对象
      dataList: [], // data.items //全部
      waitList: [], // 待审核
      alreadyList: [], // 已经审核
      rejectList: [], // 拒绝审核
      subjectIDOptions: [], // 精选列表
      subjectsList: [], // 学科列表
      difficulty: difficulty, // 难度
      questionType: questionType, // 题型
      direction: direction, // 方向
      number: '', // 试题编号
      citySelect: {
        province: [],
        cityDate: []
      },
      serachList: [] // 搜索列表
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getSubjectsList()
    this.getRecommendList()
    this.getCityData()
  },
  mounted() {},
  methods: {
    // 获取学科列表
    async getRecommendList() {
      const subjects = await list()
      this.subjectsList = subjects.data.items
    },
    async getSubjectsList() {
      const { data } = await choice()
      // 精品列表
      this.data = data
      this.dataList = data.items
      // 试题编号
      this.number = data.items.number
      // 待审核列表
      this.waitShenhe = data.items.find(e => e.publishState == 1)
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.formData.city = this.citySelect.cityDate[0]
    },
    //  点击跳转至试题录入
    add() {
      this.$router.push({ path: 'new' })
    },

    // 点击"清除"按钮
    clear() {
      this.$refs.formRef.resetFields()
      this.getSubjectsList()
    },
    // 点击"搜索"按钮
    search() {
      this.dataList = this.dataList.filter(e => e.subjectID == this.formData.subjectID)
      // 拿到学科
      // console.log(this.formData.subjectID);
      // 或者拿到关键字
      // 根据学科 / 或者关键字可以筛选数组传给子组件
    },
    // 点击tabs按钮
    handleClick(tab, event) {
      // 筛选出待审核的列表
      this.waitList = this.dataList.filter(e => e.chkState == 1)
      // 筛选已经审核的列表
      this.alreadyList = this.dataList.filter(e => e.chkState == 2)
      //  筛选审核被拒绝的列表
      this.rejectList = this.dataList.filter(e => e.chkState !== 1 && e.chkState !== 2)
    }

  }
}
</script>

<style scoped>
.choice-container {
  margin: 10px 0;
  padding: 0 10px;
}
.el-card {
  color: #ffc0cb !important;
}
.elcard_body {
  padding: 20px;
}
</style>
